<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
       1.插值语法无法识别html标签 会吧标签作为普通文本进行处理  {{}}
       2. v-html     识别标签
       3. v-text    不能识别标签

       注意:   1.以上两个指令在使用时可以被vue实例解析  那么指令后面编写的字符串就不在是普通字符串  而是在vue实例初始化时 data中的属性名
              2. 两个指令会覆盖标签中的原始内容

-->
<div id="app">
    <p>这是一个默认文本{{title}}</p>
    <p v-html="title">这是一个默认文本</p>
    <p v-text="info">这是一个默认文本</p>
    <p v-text="info.toUpperCase()">这是一个默认文本</p>
    <p v-text="age+1">这是一个默认文本</p>
    <!--    响应式只在初始化渲染时有效-->
    <p v-once>{{age}}</p>
</div>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            title: '<h1>这是一级标题</h1>',
            info: 'Hello',
            age: 10
        }
    })

</script>


</body>
</html>